<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Universidad de Puerto Rico: Recinto de Mayaguez | Mapa del Campus</title>
<link rel="shortcut icon" href="http://www.uprm.edu/favicon.ico">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<!-- Javascript / Fail --> 
<noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b> 
      However, it seems JavaScript is either disabled or not supported by your browser. 
      To view Google Maps, enable JavaScript by changing your browser options, and then 
      try again.
</noscript>
<script type="text/javascript"> 
	// v1 by Yamil Asusta 
	function initialize() {
		var medio = new google.maps.LatLng(18.210919,-67.140906); // Medio - Punto de referencia
		var myOptions = 
		{
			zoom: 18,
			center: medio,
			mapTypeId: google.maps.MapTypeId.SATELLITE,
			mapTypeControl: true,
			mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
			navigationControl: true,
			navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
		}
		var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
		
        // Imagenes Custom
		var marcador = 'images/paw.png'; // Imagen de icono - Tarzan Paw
		 
		// Contenido de edificios
	    var Biblioteca = '<div id="content">'+
        '<div id="siteNotice">'+
        '</div>'+
        '<h1 id="firstHeading" class="firstHeading">Test!</h1>'+ // Edit Here
        '<div id="bodyContent">'+
        'La Biblioteca!' + // Edit Content
        '</div>'+
        '</div>';
		
		var Stefani = '<div id="content">'+
        '<div id="siteNotice">'+
        '</div>'+
        '<h1 id="firstHeading" class="firstHeading">Test! # 2</h1>'+ // Edit Here
        '<div id="bodyContent">'+
        'Stefani = ICOM ' + // Edit Content
        '</div>'+
        '</div>';
        
		// Burbujas de contenido
		var infowindowbiblio = new google.maps.InfoWindow
		({
			content: Biblioteca
		});
		var infowindowstefani = new google.maps.InfoWindow
		({
			content: Stefani
		});
		
		// Longitud y Latitud del Edificio
		var biblio = new google.maps.LatLng(18.211040816294627,-67.14140474796295); 
		var stef = new google.maps.LatLng(18.209828029702546,-67.1396479010582);
		
		// Opciones del Marcador
		var biblio = new google.maps.Marker
		({
			position: biblio,
			map: map,
			icon: marcador,
			title: 'Biblioteca'
		});		
		var Stefani = new google.maps.Marker
		({
			position: stef,
			map: map,
			icon: marcador,
			title: 'Stefani'
		});
		
		// Funcion de Burbuja
		google.maps.event.addListener(biblio, 'click', function() 
		{
			infowindowbiblio.open(map,biblio);
		});  
		google.maps.event.addListener(Stefani, 'click', function() 
		{
			infowindowstefani.open(map,Stefani);
		});
		
	}
	google.setOnLoadCallback(initialize);
	//Things to do - Limites, Overlays, Rutas.	
</script> 
</head> 
<body style="margin:0px; padding:0px;" onload="initialize()"> 
  <div id="map_canvas" style="width:100%; height:100%"></div> 
</body> 
</html> 